<template>
  <div id="versionInfo">
    <!-- 头部 -->
    <BaseHeader :title="$t('translate11')" :rightIcon="null" @leftClick="$router.goBack()" />
    <div class="navBar" style="width: 100%; height: 56px" :style="{ paddingTop: `${headerHeight}px` }">
      <van-tabs v-model="active" :color="tabColor" style="height: 56px; margin-top: 5px" @click="handle">
        <van-tab :title="$t('translate13')" name="d"></van-tab>
        <van-tab :title="$t('translate15')" name="m"></van-tab>
        <van-tab :title="$t('translate14')" name="y"></van-tab>
      </van-tabs>
    </div>
    <div class="timeSelect">
      <div class="timeTitle">
        <div class="leftArrow" :style="{ backgroundImage: `url(${leftIcon}) ` }" @click="handlLeft"></div>
        <div class="centerText">
          <span>
            {{ titleDate }}
          </span>
          <!-- <span
            >2022{{ $t("year") }}09{{ $t("month") }}09{{ $t("day") }}
            {{ $t("Monday") }}</span
          > -->
        </div>
        <div class="rightArrow" :style="{ backgroundImage: `url(${rightIcon}) ` }" @click="handlRight"></div>
      </div>
      <div class="nowTime">{{ titleTime }}</div>
      <div class="timeData">
        {{ $t("translate31") }}<span style="margin:0 2px;">{{ seatedCount }}</span>{{ $t("second") }}
      </div>
    </div>
    <charBar id="main1" :data="data1" ref="charBar1"  :translate="this.$t('translate45')"></charBar>
    <div class="title titleSecond">{{ $t("translate17") }}</div>
    <HomeInfo :dataList="dataList"></HomeInfo>
    <div class="title titleSecond">{{ $t("translate32") }}</div>
    <charBar id="main2" :data="data2" ref="charBar2"  :translate="this.$t('translate45')"></charBar>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import charBar from "@/components/charBar.vue";
import charPie from "@/components/charPie.vue";
import HomeInfo from "@/components/HomeInfo.vue";
import mixin from "@/mixins/mixins";
export default {
  name: "VersionInfo",
  mixins: [mixin],
  data() {
    return {
      active: 0,
      rightIconName: "ic_list_right",
      leftIconName: "ic_list_left",
      dataList: [
        {
          number: 11,
          unit: this.$t("second"),
          infoName: this.$t("translate30"),
        },
        {
          number: 37.6,
          unit: this.$t("second"),
          infoName: this.$t("translate322"),
        },
      ],
      seatedCount: 0,
      data2: { xData: [], yData: [] },
      data1: {
        xData: [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
          "24:00",
        ],
        yData: [
          // {
          //   value: 200,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 80,
          //   itemStyle: {
          //     color: "rgb(237,111,33)",
          //   },
          // },
          // {
          //   value: 60,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 220,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 120,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 100,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 80,
          //   barWidth: "30%",
          //   itemStyle: {
          //     color: "rgb(237,111,33)",
          //   },
          // },
          // {
          //   value: 60,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 80,
          //   barWidth: "30%",
          //   itemStyle: {
          //     color: "rgb(237,111,33)",
          //   },
          // },
          // {
          //   value: 60,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
          // {
          //   value: 80,
          //   barWidth: "30%",
          //   itemStyle: {
          //     color: "rgb(237,111,33)",
          //   },
          // },
          // {
          //   value: 60,
          //   itemStyle: {
          //     color: "rgb(100,187,92)",
          //   },
          // },
        ],
      },
    };
  },
  components: {
    charBar,
    HomeInfo,
    charPie,
  },
  computed: {
    list() {
      return [
        {
          // 固件版本
          id: 0,
          left: this.$t("fwVersion"),
          right: this.fwv,
          arrow: false,
        },
        {
          // 硬件版本
          id: 1,
          left: this.$t("hwVersion"),
          right: this.hwv,
          arrow: false,
          border: false,
        },
      ];
    },
    ...mapState(["fwv", "hwv", "darkMode", "devId"]),
    ...mapGetters(["imgPath", "headerHeight"]),
    rightIcon() {
      return this.darkMode
        ? require(`../assets/${this.rightIconName}_Dark.png`)
        : require(`../assets/${this.rightIconName}_normal.png`);
    },
    leftIcon() {
      return this.darkMode
        ? require(`../assets/${this.leftIconName}_Dark.png`)
        : require(`../assets/${this.leftIconName}_normal.png`);
    },
  },
  watch: {
    titleDate: {
      handler(newVal, oldVal) {
        this.getBar(this.startTime, this.endTime, this.dateType);
        this.getBar2(this.startTime, this.endTime, this.dateType);
      },

      // immediate: true,
    },
    type: {
      handler(newVal, oldVal) {
        if (newVal == "d") {
          this.dataList[0].infoName =
            this.$t("translate35") + this.$t("translate30");
          this.dataList[1].infoName =
            this.$t("translate35") + this.$t("translate322");
        } else if (newVal == "m") {
          this.dataList[0].infoName =
            this.$t("translate36") + this.$t("translate30");
          this.dataList[1].infoName =
            this.$t("translate36") + this.$t("translate322");
        } else {
          this.dataList[0].infoName =
            this.$t("translate37") + this.$t("translate30");
          this.dataList[1].infoName =
            this.$t("translate37") + this.$t("translate322");
        }
      },
      immediate: true
    },
  },

  methods: {
    getBar(startTime, endTime, dateType) {
      window.hilink.getDevStatisticsDataWithQuery(
        this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
        JSON.stringify({
          devId: this.devId,
          sid: "seated",
          character: "seatedCount",
          startTime: startTime,
          endTime: endTime,
          pageSize: "31",
          accuracy: dateType,
        }),
        "Ag.resultCallback31" // resultCallback，成功或失败时，将调用传入resultStr返回结果
      );

      window.Ag.resultCallback31 = (res) => {
        console.log("seatedCount统计数据res:", res);
        let data = JSON.parse(res);

        let xarr = [];
        let yarr = [];
        let seatedCount = 0;
        let old = 0;
        if (this.type == "d") {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[0].number = number;
          for (let i = 0; i < 25; i++) {
            let day2 = "";
            if (i < 10) {
              day2 = "0" + i;
              xarr.push("0" + i + ":00");
            } else {
              day2 = i;
              xarr.push(i + ":00");
            }
            let isHave = false;
            let obj = "";

            data.devDatas.forEach((e) => {
              let day = e.time.slice(8, 10);
              if (day == day2) {
                console.log("day2", day2);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });
            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }
          console.log("xarr:", xarr);
          console.log("yarr:", yarr);
        } else if (this.type == "m") {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[0].number = number;
          var weekArr = [
            this.$t("Monday"),
            this.$t("Tuesday"),
            this.$t("Wednesday"),
            this.$t("Thursday"),
            this.$t("Friday"),
            this.$t("Saturday"),
            this.$t("Sunday"),
          ];
          var weekDay = [];
          for (let x = 0; x < 7; x++) {
            let wd = new Date(
              parseInt(this.startTime + "000") + 24 * 60 * 60 * 1000 * x
            ).getDate();
            weekDay.push(wd);
            let isHave = false;
            let obj = "";
            data.devDatas.forEach((e) => {
              let day = parseInt(e.time.slice(6, 8));
              if (day == wd) {
                console.log("day2", wd);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });

            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }

          xarr = weekArr;

          console.log("xarr", xarr);
        } else {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[0].number = number;
          let old = 0;

          for (let i = 1; i < this.mouthDay + 1; i++) {
            let day2 = "";
            if (i < 10) {
              day2 = "0" + i;
              xarr.push("0" + i);
            } else {
              day2 = i;
              xarr.push(i);
            }
            let isHave = false;
            let obj = "";

            data.devDatas.forEach((e) => {
              let day = e.time.slice(6, 8);
              if (day == day2) {
                console.log("day2", day2);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });
            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }

          console.log("xarr", xarr);
        }
        data.devDatas.forEach((e) => {
          seatedCount += parseInt(e.sum);
        });
        this.data1.xData = xarr;
        this.data1.yData = yarr;
        this.seatedCount = seatedCount;
        this.$refs.charBar1.draw();
      };
    },
    getBar2(startTime, endTime, dateType) {
      window.hilink.getDevStatisticsDataWithQuery(
        this.devId, // devid,string,请取"0"，表示当前设备，暂不支持其它取值
        JSON.stringify({
          devId: this.devId,
          sid: "sitPosture",
          character: "sitPostureChangeCount",
          startTime: startTime,
          endTime: endTime,
          pageSize: "31",
          accuracy: dateType,
        }),
        "Ag.resultCallback32" // resultCallback，成功或失败时，将调用传入resultStr返回结果
      );

      window.Ag.resultCallback32 = (res) => {
        console.log("seatedCount统计数据222res:", res);
        let data = JSON.parse(res);

        let xarr = [];
        let yarr = [];

        let old = 0;
        if (this.type == "d") {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[1].number = number;
          for (let i = 0; i < 25; i++) {
            let day2 = "";
            if (i < 10) {
              day2 = "0" + i;
              xarr.push("0" + i + ":00");
            } else {
              day2 = i;
              xarr.push(i + ":00");
            }
            let isHave = false;
            let obj = "";

            data.devDatas.forEach((e) => {
              let day = e.time.slice(8, 10);
              if (day == day2) {
                console.log("day2", day2);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });
            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }
          console.log("xarr:", xarr);
          console.log("yarr:", yarr);
        } else if (this.type == "m") {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[1].number = number;
          var weekArr = [
            this.$t("Monday"),
            this.$t("Tuesday"),
            this.$t("Wednesday"),
            this.$t("Thursday"),
            this.$t("Friday"),
            this.$t("Saturday"),
            this.$t("Sunday"),
          ];
          var weekDay = [];
          for (let x = 0; x < 7; x++) {
            let wd = new Date(
              parseInt(this.startTime + "000") + 24 * 60 * 60 * 1000 * x
            ).getDate();
            weekDay.push(wd);
            let isHave = false;
            let obj = "";
            data.devDatas.forEach((e) => {
              let day = parseInt(e.time.slice(6, 8));
              if (day == wd) {
                console.log("day2", wd);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });

            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }

          xarr = weekArr;

          console.log("xarr", xarr);
        } else {
          let number = 0;
          data.devDatas.forEach((e) => {
            number += parseInt(e.sum);
          });
          this.dataList[1].number = number;
          let old = 0;

          for (let i = 1; i < this.mouthDay + 1; i++) {
            let day2 = "";
            if (i < 10) {
              day2 = "0" + i;
              xarr.push("0" + i);
            } else {
              day2 = i;
              xarr.push(i);
            }
            let isHave = false;
            let obj = "";

            data.devDatas.forEach((e) => {
              let day = e.time.slice(6, 8);
              if (day == day2) {
                console.log("day2", day2);
                console.log("e.sum", e.sum);
                isHave = true;

                if (old == 0) {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(100,187,92)",
                    },
                  };
                  old = 1;
                } else {
                  obj = {
                    value: e.sum,
                    itemStyle: {
                      color: "rgb(237,111,33)",
                    },
                  };
                  old = 0;
                }
              }
            });
            if (!isHave) {
              yarr.push({
                value: 0,
                itemStyle: {
                  color: "rgb(100,187,92)",
                },
              });
            } else {
              yarr.push(obj);
            }
          }

          console.log("xarr", xarr);
        }

        this.data2.xData = xarr;
        this.data2.yData = yarr;
        console.log("this.data2", JSON.stringify(this.data2));
        this.$refs.charBar2.draw();
      };
    },
  },
  created() {
    window.hilink.setTitleVisible(false, "window.Ag.setTitleVisible");
    window.Ag.setTitleVisible = (res) => { };
    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.push("/");
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");

// 适配
.pad {
  #versionInfo {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>